<template>
  <div>
    <div id="map" ref="map" class="map-container"></div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ' // 引入XYZ地图格式

export default {
    name: "baseMap",
    props: {},
    data() {
        return {
            map:null,
        }
    },
    mounted() {
        let _ = this
        _.initMap()
    },
    methods: {
        initMap() {
            // 实例化地图
            this.map = new Map({
                target: this.$refs.map,
                layers: [
                    new Tile({
                        name: 'defaultLayer',
                        source: new XYZ({
                            url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
                        })
                    })
                ],
                view: new View({
                    projection: 'EPSG:4326',
                    center: [120.299, 31.568],
                    zoom: 11 // 地图缩放级别（打开页面时默认级别）
                })

            })
        },
    },
    watch: {},
    computed: {},
}
</script>

<style lang="less" scoped>
@import "index.less";
</style>
